<template>
  <public-modal
    width="500px"
    :footer="false"
    title="营业信息"
    modalStyle="visitor-detailModal"
    :publicVisible="publicVisible"
    @handleOk="handleOk"
    @cancel="cancel"
  >
    <div slot="content">
      <div class="content-container">
        <table>
          <tr>
            <td colspan="1" class="td_lable">灶头数(个)</td>
            <td colspan="1" class="td_value">{{ record.stoveNum }}</td>
            <td colspan="1" class="td_lable">餐厅规模</td>
            <td colspan="1" class="td_value">{{ record.scale_dictText }}</td>
          </tr>
          <tr>
            <td colspan="1" class="td_lable">餐饮类别</td>
            <td colspan="1" class="td_value">{{ record.type_dictText }}</td>
            <td colspan="1" class="td_lable">座位数(个)</td>
            <td colspan="1" class="td_value">{{ record.seatingCapacity }}</td>
          </tr>
          <tr>
            <td colspan="1" class="td_lable">营业面积(㎡)</td>
            <td colspan="1" class="td_value">{{ record.businessArea }}</td>
            <td colspan="1" class="td_lable">就业人数(人)</td>
            <td colspan="1" class="td_value">{{ record.employment }}</td>
          </tr>
        </table>
      </div>
    </div>
    <div slot="footer"></div>
  </public-modal>
</template>
<script>
import publicModal from '@/components/publicModal'
export default {
  name: 'cancelModel',
  components: { publicModal },
  props: {
    record: {
      type: Object,
    },
  },
  data() {
    return {
      publicVisible: false,
    }
  },
  mounted() {},
  methods: {
    show(records) {
      this.publicVisible = true
    },
    handleOk() {},
    cancel() {
      this.publicVisible = false
    },
  },
}
</script>
<style lang="less">
.visitor-detailModal {
  .content-container {
    padding: 32px 34px;

    table {
      td {
        width: 120px;
        max-width: 120px;
        height: 46px;
        background: #02595b;
        border: 1px solid #036265;
        text-align: center;

        font-size: 14px;
        font-weight: 400;

        white-space: nowrap; /* 不换行 */
        overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
        text-overflow: ellipsis; /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用*/
        // border-collapse: separate;
      }
    }

    .td_lable {
      color: #02c1c7;
    }

    .td_value {
      color: #9cfdff;
    }
  }
}
</style>
